<template>
    <div class="container w1200">
        <div class="fill-steps">
            <div v-for="(item, index) in steps" :key="index" class="title">
                <img :src="currentList.includes(item.id) ? item.current : item.icon" alt="" />
                <span :class="currentList.includes(item.id) ? 'active' : ''">{{ item.title }}</span>
            </div>
        </div>
        <a-steps :current="current">
            <a-step v-for="(item, index) in steps" :key="index" />
        </a-steps>
        <div class="c-title">公司信息</div>
        <a-form-model ref="ruleForm" layout="vertical" :model="formData" :rules="formRules">
            <a-form-model-item label="您的企业规模" prop="scale">
                <a-radio-group v-model="formData.scale">
                    <a-radio-button :value="item" v-for="(item, index) in scaleList" :key="index">
                        {{ item }}
                    </a-radio-button>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="请选择您所在公司的职位信息">
                <a-radio-group v-model="formData.position">
                    <a-radio-button :value="item" v-for="(item, index) in positionList" :key="index">
                        {{ item }}
                    </a-radio-button>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="告诉我们您公司的人员规模" prop="employeeScale">
                <a-radio-group v-model="formData.employeeScale">
                    <a-radio-button :value="item" v-for="(item, index) in personnelList" :key="index">
                        {{ item }}
                    </a-radio-button>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="您公司的年收入情况">
                <a-radio-group v-model="formData.income">
                    <a-radio-button :value="item" v-for="(item, index) in incomeList" :key="index">
                        {{ item }}
                    </a-radio-button>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item prop="primaryBusinessType">
                <span slot="label">专注领域<font> (可多选)</font></span>
                <a-checkbox-group v-model="formData.primaryBusinessType">
                    <a-checkbox v-for="(item, index) in businessList" :key="index" :value="item.id">
                        {{ item.name }}
                    </a-checkbox>
                </a-checkbox-group>
            </a-form-model-item>
            <a-form-model-item label="请选择您服务的覆盖地域" prop="territory">
                <a-radio-group v-model="formData.territory">
                    <a-radio-button :value="item" v-for="(item, index) in coverageList" :key="index">
                        {{ item }}
                    </a-radio-button>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item prop="obtainCustomer">
                <span slot="label">请选择您当前的获客方式<font> (可多选)</font></span>
                <a-checkbox-group v-model="formData.obtainCustomer">
                    <a-checkbox v-for="(item, index) in getTypeList" :key="index" :value="item">
                        {{ item }}
                    </a-checkbox>
                </a-checkbox-group>
            </a-form-model-item>
        </a-form-model>
        <div class="btn">
            <!-- <a-button style="margin-left: 10px" @click="prev"> 上一步 </a-button> -->
            <a-button type="primary" html-type="submit" @click="submit"> 下一步 </a-button>
        </div>
    </div>
</template>

<script>
import { localStorage } from '~/plugins/tools'

export default {
    name: 'Settled',
    components: {},
    layout: 'no-menu',
    data () {
        return {
            current: 0,
            currentList: [0],
            steps: [
                {
                    id: 0,
                    title: '公司信息',
                    icon: require('~/assets/images/icon/company-info.png'),
                    current: require('~/assets/images/icon/company-info-active.png')
                },
                {
                    id: 2,
                    title: '实名认证',
                    icon: require('~/assets/images/icon/certification.png'),
                    current: require('~/assets/images/icon/certification.png')
                }
            ],
            businessList: [],
            scaleList: ['微型', '小型', '中型', '大型', '特大型'],
            positionList: ['创始人', '合伙人', '高管', '中管', '部门主管', '普通职员'],
            personnelList: ['0-20人', '20-100人', '100-300人', '300-1000人', '1000人以上'],
            incomeList: ['0-1000万元', '1000万-5000万元', '5000万-1亿元', '1亿元以上'],
            coverageList: ['公司所在城市', '当地城市+周边城市', '全国'],
            getTypeList: ['个人人脉资源', '搜索网站广告', '新媒体/自媒体', '线下广告', '入驻电商平台', '其他'],
            formData: {
                scale: '',
                position: '',
                employeeScale: '',
                income: '',
                primaryBusinessType: [],
                territory: '',
                obtainCustomer: []
            },
            formRules: {
                scale: [{ required: true, message: '请选择您的企业规模', trigger: 'blur' }],
                employeeScale: [{ required: true, message: '请选择您公司的人员规模', trigger: 'blur' }],
                primaryBusinessType: [{ required: true, message: '请选择您公司的专注领域', trigger: 'blur' }],
                territory: [{ required: true, message: '请选择您服务的覆盖地域', trigger: 'blur' }],
                obtainCustomer: [{ required: true, message: '请选择您当前的获客方式', trigger: 'blur' }]
            }
        }
    },
    head () {
        return {
            title: '入驻填报'
        }
    },
    created () {
        if (process.client && localStorage.getItem('refresh') === 'refresh') {
            localStorage.removeItem('refresh')
            window.location.reload()
        }
    },
    async mounted () {
        const res = await this.$ApiServer['company/tree']()
        if (res.code === 200) {
            this.businessList = res.data.filter(item => item.status)
        }
        this.getEnterDetail()
    },
    activated () {
        this.getEnterDetail()
    },
    methods: {
        // 获取入住详情
        async getEnterDetail () {
            const res = await this.$ApiServer['company/enter/detail']()
            if (res.code === 200) {
                this.formData.scale = res.data.scale
                this.formData.position = res.data.position
                this.formData.employeeScale = res.data.employeeScale
                this.formData.income = res.data.income
                this.formData.primaryBusinessType = res.data.primaryBusinessType.split(',')
                this.formData.territory = res.data.territory
                this.formData.obtainCustomer = res.data.obtainCustomer.split(',')
            }
        },
        prev () {
            this.$router.push('/welcome')
        },
        submit () {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    const { employeeScale, income, obtainCustomer, position, primaryBusinessType, scale, territory } =
                        this.formData
                    const res = await this.$ApiServer['company/srueStep']({
                        step: 1,
                        scale,
                        position,
                        employeeScale,
                        income,
                        primaryBusinessType: primaryBusinessType.join(','),
                        territory,
                        obtainCustomer: obtainCustomer.join(','),
                        orgCategoryId: 4 // 默认是服务商
                    })
                    if (res.code === 200) {
                        this.$router.push({ name: 'company-auth' })
                    }
                    // 已经入驻，是从公司认证信息返回来的
                    if (res.code === 500) {
                        this.$router.push({ name: 'company-auth' })
                    }
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    background-color: #ffffff;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    padding: 0.3rem 0.2rem;
    border-radius: 0.06rem;
    .ant-steps {
        padding: 0 3.18rem;
        margin-top: 0.1rem;
        ::v-deep {
            .ant-steps-item-finish {
                .ant-steps-item-icon {
                    background: linear-gradient(90deg, #009944 0%, #64e99f 100%);
                    border: none;
                    span {
                        color: #ffffff;
                    }
                }
            }
            .ant-steps-item-process .ant-steps-item-icon {
                background: linear-gradient(90deg, #009944 0%, #64e99f 100%);
                border: none;
                .ant-steps-item-title {
                    &::after {
                        top: 12px;
                    }
                }
            }
            .ant-steps-item-icon {
                width: 0.24rem;
                height: 0.24rem;
                line-height: 0.24rem;
                margin-right: 0;
                border: 1px solid #999999;
            }
        }
    }
    .fill-steps {
        padding: 0 3.02rem;
        display: flex;
        justify-content: space-between;
        .title {
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
                width: 0.32rem;
                height: 0.32rem;
            }
            span {
                font-size: 0.14rem;
                color: #999999;
                line-height: 0.2rem;
                margin-top: 0.05rem;
                &.active {
                    color: @primary-color;
                }
            }
        }
    }
    .ant-form {
        padding: 0.27rem 1rem 0.1rem 0.56rem;
        ::v-deep {
            .ant-form-item-label {
                .ant-form-item-required {
                    &::before {
                        margin-right: 0;
                        color: @primary-color;
                    }
                }
                span {
                    font-size: 0.14rem;
                    color: #2a2a2a;
                    word-spacing: 0;
                    font {
                        font-size: 0.12rem;
                        color: #999999;
                    }
                }
            }
            .ant-radio-group {
                display: flex;
                flex-wrap: wrap;
                .ant-radio-button-wrapper {
                    height: 0.36rem;
                    background: #e9e9e9;
                    border: none;
                    display: flex;
                    justify-content: center;
                    color: #2a2a2a;
                    font-size: 0.14rem;
                    border-radius: 0.04rem;
                    margin-right: 0.2rem;
                    margin-bottom: 0.1rem;
                    padding: 0 0.3rem;
                    span {
                        color: #2a2a2a;
                        line-height: 1.1;
                        display: flex;
                        align-items: center;
                    }
                    &.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
                        box-shadow: none;
                        border: 1px solid @primary-color;
                        background-color: rgba(0, 153, 68, 0.2);
                        color: #2a2a2a;
                        border: 1px solid @primary-color;
                        &::before {
                            display: none;
                        }
                    }
                    & + .ant-radio-button-wrapper {
                        margin-left: 0;
                        &::before {
                            display: none;
                        }
                    }
                }
            }
            .ant-checkbox-group {
                display: flex;
                flex-wrap: wrap;
                .ant-checkbox-wrapper {
                    display: flex;
                    justify-content: center;
                    height: 0.36rem;
                    background: #e9e9e9;
                    border: none;
                    color: #2a2a2a;
                    font-size: 0.14rem;
                    border-radius: 4px;
                    margin-right: 0.2rem;
                    margin-bottom: 0.1rem;
                    padding: 0 0.3rem;
                    span {
                        display: flex;
                        align-items: center;
                        line-height: 1.1;
                        padding: 0;
                    }
                    &.ant-checkbox-wrapper-checked {
                        box-shadow: none;
                        border: 1px solid @primary-color;
                        background-color: rgba(0, 153, 68, 0.2);
                        color: #2a2a2a;
                        border: 1px solid @primary-color;
                    }
                    & + .ant-checkbox-wrapper {
                        margin-left: 0;
                    }
                    .ant-checkbox {
                        display: none;
                    }
                }
            }
            .ant-form-item-children {
                display: flex;
                flex-wrap: wrap;
                .editable {
                    &-button {
                        width: 100px;
                        height: 0.36rem;
                        background: #e9e9e9;
                        border: none;
                        padding: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #2a2a2a;
                        border-radius: 4px;
                        margin-top: 0;
                        margin-right: 0.2rem;
                    }
                    &-input {
                        width: 1.5rem;
                        height: 0.36rem;
                        color: #2a2a2a;
                        border-radius: 4px;
                        margin-top: 0;
                    }
                }
            }
        }
    }
    .btn {
        display: flex;
        justify-content: flex-end;
        padding-right: 0.2rem;
        position: relative;
        padding-top: 0.32rem;
        button + button {
            margin-left: 0.2rem;
        }
        &:before {
            width: 1200px;
            content: '';
            display: block;
            height: 1px;
            background-color: #e9e9e9;
            position: absolute;
            top: 0;
            left: -0.2rem;
        }
    }
    .c-title {
        margin-top: 0.2rem;
        font-size: 0.16rem;
        font-weight: bold;
        line-height: 0.22rem;
        color: @primary-color;
        border-left: 0.04rem solid @primary-color;
        padding-left: 0.1rem;
    }

    ::v-deep {
        .ant-btn {
            width: 90px;
            height: 36px;
            opacity: 1;
            border-radius: 2px;
        }
        .ant-form-item {
            margin-bottom: 0.2rem;
            padding-bottom: 0;
        }
        .ant-form-vertical .ant-form-item-label,
        .ant-col-24.ant-form-item-label,
        .ant-col-xl-24.ant-form-item-label {
            padding: 0 0 0.1rem;
        }
    }
}
</style>
